import { defineComponent, onBeforeMount, onMounted, Ref, ref, SetupContext, watch } from 'vue';
import { MemoryVoiceResourceListProps, memoryVoiceResourceListProps, NavItemProp } from './resource-list.props';
import './resource-list.scss';

export default defineComponent({
    name: 'FMemoryVoiceResourceList',
    props: memoryVoiceResourceListProps,
    emits: [''],
    setup(props: MemoryVoiceResourceListProps, context: SetupContext) {
        const resourceList = ref(props.data || []);
        const mainCategory = ref(props.mainCategory);
        const subCategories = ref(props.subCategories);

        onBeforeMount(() => {});
        onMounted(() => {});

        function renderHorizontalViewList() {
            const ulClass = props.showDirection === 'vertical' ? 'resource-ul vertical' : 'resource-ul ';
            return (
                <div>
                    <ul class={ulClass}>
                        {resourceList.value.map((item, index) => {
                            return renderHorizontalView(item);
                        })}
                    </ul>
                </div>
            );
        }

        function renderHorizontalView(resouce: any) {
            // TODO 获取默认图片
            return (
                <li class="resource-li">
                    <a class="resource-item">
                        <div class="head border" style="border-radius:8px;overflow:hidden;">
                            <img class="j-img" src={resouce.img} />
                        </div>
                        <div class="info flex-fill">
                            <h5>
                                <span class="info-title">{resouce.title}</span>
                            </h5>
                            <p class="info-description text-muted">{resouce.description}</p>
                        </div>
                    </a>
                </li>
            );
        }

        function renderHeaderNavItem(item: NavItemProp) {
            return (
                <div class="d-flex sub-item">
                    <span class="sub-title">{item.title}</span>
                    <span class="line">|</span>
                </div>
            );
        }
        return () => {
            const headerClass = props.isHot ? 'mv-resource-list-header hot' : 'mv-resource-list-header';
            return (
                <div class="w-100">
                    <div class={headerClass}>
                        {props.isHot ? <span class="f-icon f-icon-home-ring category-icon"></span> : ''}
                        <span class="main-title">{mainCategory?.value?.title}</span>
                        <div class="sub-nav flex-fill">
                            {subCategories.value.map((item) => {
                                return renderHeaderNavItem(item);
                            })}
                        </div>
                        <span class="more">
                            <a>更多&gt;&gt;</a>
                        </span>
                    </div>

                    <div class="mv-resource-list">{renderHorizontalViewList()}</div>
                </div>
            );
        };
    }
});
